import React, {Component} from 'react';
import {Grid,Input,Select,Button,Feedback,Radio} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import './BaseUserInfo.scss';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Option } = Select;
const { Group: RadioGroup } = Radio;
/**
*  用户基础信息
*/
export default class BaseUserInfo extends Component{
  constructor(props) {
     super(props);
     this.state = {
       user: {
         userName:"admin",
         sex:0
       },
       provinceData:[{label:"选择省份",value:""}],
       cityData:[{label:"选择城市",value:""}],
       countyData:[{label:"选择县级",value:""}],
       verify:{
         userNameState:""
       }
     }
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    // const res = API.getUserInfo4Ajax();
    // API.getUserInfo().then((res) => {
    // this.state.user = res.result;
      let user = this.props.user;
      this.state.user = user;
      if (user.landline != '' && user.landline != undefined) {
        this.state.user.quhao=user.landline.split('-')[0];
        this.state.user.haoma=user.landline.split('-')[1];
      }
      //初始化省市县
      this.state.provinceData = API.getUserArea().result;
      //初始化市
      if(this.state.user.province != undefined){
          this.state.cityData = API.getUserArea({"parentId":this.state.user.province}).result;
          this.state.cityData.unshift({label:"选择城市",value:""});
      }
      //初始化县
      if(this.state.user.city != undefined){
          this.state.countyData = API.getUserArea({"parentId":this.state.user.city}).result;
          this.state.countyData.unshift({label:"选择县级",value:""});
      }
      this.setState(this.state);
    // });
  }
  //省级联动
  changeProvince = (value)=>{
      this.state.cityData = API.getUserArea({"parentId":value}).result;
      this.state.cityData.unshift({label:"选择城市",value:""});
      this.state.user.city = "";
      this.state.countyData = [{label:"选择县级",value:""}];
      this.state.user.county = "";
      this.setState(this.state);
  }
  //市级联动
  changeCity = (value)=>{
      this.state.countyData = API.getUserArea({"parentId":value}).result;
      this.state.countyData.unshift({label:"选择县级",value:""});
      this.state.user.county = "";
      this.setState(this.state);
  }

  formChange = (value) => {
    // console.log(value);
  };

  validateAllFormField = () => {
   this.refs.form.validateAll((errors, values) => {
     if(errors == null){
       //拼接电话号
       if(values.user.haoma != '' || values.user.quhao){
         values.user["landline"] = values.user.quhao+"-"+values.user.haoma;
       }
       //调用接口，更新用户
       API.updateUserInfo(values.user).then((res) => {
         Feedback.toast.success("更新成功");
       });
     }
   });
 };

 verifyUserName(rule, value, callback){
   var errors = [];
   var res = API.verifyUserName({user_name:value,filter_id:this.state.user.id});
   if (!res.result.flag) {
     this.state.verify.userNameState = "error";
     errors.push('用户名重复');
   } else {
     this.state.verify.userNameState = "success";
   }
   this.setState(this.state);
   callback(errors);
 }

  render(){
    const user_id = this.state.user.id;
    return(
      <div className="base-user-info-main">
        <IceFormBinderWrapper
          value={this.state}
          onChange={this.formChange}
          ref="form">
          <div>
            <div className="base-user-block">
              <div className="title">姓名 ：</div>
              <IceFormBinder  triggerType="onBlur" max={10}>
                <Input className="base-user-length" size="large" placeholder="管理员" name="user.nick_name" />
              </IceFormBinder>
              <div><IceFormError className="err" name="user.nick_name" /></div>
            </div>
            <div className="base-user-block">
              <div className="title">登录名 ：</div>
              <IceFormBinder triggerType="onBlur" rules={[
                  {
                    type: 'string',
                    required: true,
                    message: '必填',
                  },{
                    type: 'string',
                    max:10,
                    message: '不能超过10个字符',
                  },{
                    validator: this.verifyUserName.bind(this)
                  }
                ]}>
                <Input state={this.state.verify.userNameState} className="base-user-length" size="large" placeholder="admin" name="user.user_name"/>
              </IceFormBinder>
              <div><IceFormError className="err" name="user.user_name" /></div>
            </div>
            <div className="base-user-block">
              <div className="title">性别 ：</div>
              <IceFormBinder name="user.sex">
                <RadioGroup>
                    <Radio value={1}>男</Radio>
                    <Radio value={2}>女</Radio>
                    <Radio value={0}>其他</Radio>
                 </RadioGroup>
              </IceFormBinder>
              <div><IceFormError className="err" name="user.sex" /></div>
            </div>
            <div className="base-user-block">
              <div className="title">邮箱 ：</div>
              <IceFormBinder required={true} type="email" triggerType="onBlur" message="请输入正确的邮件" >
                <Input className="base-user-length" size="large" placeholder="***@***.com" name="user.email" />
              </IceFormBinder>
              <div><IceFormError className="err" name="user.email" /></div>
            </div>
            <div className="base-user-block">
              <div className="title">个人简介 ：</div>
              <IceFormBinder >
                <Input className="base-user-length" size="large" maxLength={255} hasLimitHint={true} triggerType="onBlur" name="user.introduce" max={255} message="不能超过255个字" multiple placeholder="请输入描述..." />
              </IceFormBinder>
              <div><IceFormError className="err" name="user.introduce" /></div>
            </div>
            <div className="base-user-block">
              <div className="title">国家/地区 ：</div>
              <IceFormBinder  >
                <Select style={{width:140}} name="user.country" size="large">
                  <Option value="中国">中国</Option>
                </Select>
              </IceFormBinder>
            </div>
            <div style={{
                marginLeft:10
              }}>
              <div className="title">所在省市 ：</div>
              <IceFormBinder  >
                <Select
                  placeholder="选择省份"
                  dataSource={this.state.provinceData}
                  name="user.province"
                  onChange={this.changeProvince.bind(this)}
                  style={{
                    width:140,
                    marginRight:8,
                    margin:'5px 5px 5px 0'
                  }}
                />
              </IceFormBinder>
              <IceFormBinder  >
                <Select
                  placeholder="选择城市"
                  dataSource={this.state.cityData}
                  value={this.state.city}
                  name="user.city"
                  onChange={this.changeCity.bind(this)}
                  style={{
                    width:140,
                    margin:'5px 5px 5px 0'
                  }}
                />
              </IceFormBinder>
              <IceFormBinder  >
                <Select
                  placeholder="选择县级"
                  dataSource={this.state.countyData}
                  value={this.state.county}
                  name="user.county"
                  style={{
                    width:140,
                    margin:'5px 5px 5px 0'
                  }}
                />
              </IceFormBinder>
            </div>
            <div className="base-user-block">
              <div className="title">街道地址 ：</div>
              <IceFormBinder  triggerType="onBlur" max={10}>
                <Input className="base-user-length" size="large" placeholder="***路 **号" name="user.street" />
              </IceFormBinder>
            </div>
            <div className="base-user-block">
              <div className="title">电话 ：</div>
              <div className="base-user-length">
                <Row wrap={true} gutter={10}>
                  <Col span='8'>
                    <IceFormBinder pattern={/^(\d{3}|\d{4})$/} message='请输正确的区号' triggerType="onBlur">
                      <Input style={{width:'100%'}}  size="large" placeholder="02**" name="user.quhao" />
                    </IceFormBinder>
                  </Col>
                  <Col span='16'>
                    <IceFormBinder pattern={/^(\d{7}|\d{8})$/} message='请输正确的号码' triggerType="onBlur">
                      <Input style={{width:'100%'}} size="large" placeholder="562****" name="user.haoma" />
                    </IceFormBinder>
                  </Col>
                </Row>
              </div>
              <div>
                  <IceFormError className="err" name="user.quhao" />
                  <IceFormError className="err" name="user.haoma" />
              </div>
            </div>
            <div className="base-user-block">
              <Button type="primary" onClick={this.validateAllFormField.bind(this)}>更新基本信息</Button>
            </div>
        </div>
        </IceFormBinderWrapper>
      </div>
    )
  }
}
